<?php $this->dojo()->enable(); ?>
<div style="position: absolute;left:10px;right:10px;top:10px;bottom:10px;">
    <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div id="supply_tab" data-dojo-type="dijit.layout.ContentPane" title="Manage Supplies">
            <div id="supply_list" data-dojo-type="widget.SupplyGrid"></div>
            <div id="supply_form" data-dojo-type="widget.SupplyForm"></div>
        </div>
        <div id="product_tab" data-dojo-type="dijit.layout.ContentPane" title="Manage Products" >
            <div id="product_list" data-dojo-type="widget.ProductGrid"></div>
            <div id="product_form" data-dojo-type="widget.ProductForm"></div>
        </div>
        <div id="setting_tab" data-dojo-type="dijit.layout.ContentPane" title="Ranking Settings">
            <div data-dojo-type="widget.SettingForm"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    
    
    require(["dojo/_base/kernel",
        "dijit/registry",
        "dojo/parser",
        "dijit/layout/TabContainer",
        "dijit/layout/ContentPane",
        "widget/SupplyForm",
        "widget/SettingForm",
        "widget/SupplyGrid",
        "widget/ProductGrid",
        "widget/ProductForm",
        "dojo/domReady!"], 
    function(dojo,dijit,parser){
        parser.parse();
        
        var show = function(id){
            dojo.style(id, "display", "block");
        }
        var hide = function(id){
            dojo.style(id, "display", "none");
        }
        
        hide("supply_form");
        hide("product_form");
        
        dijit.byId("supply_tab").onShow = function(){
            dijit.byId("supply_list").loadGrid();
        }
        dijit.byId("product_tab").onShow = function(){
            dijit.byId("product_list").loadGrid();
        }
        
//        dojo.subscribe("SupplyForm/Show", null, function(object){
//            hide("supply_list");
//            show("supply_form")
//        });
//        
//        dojo.subscribe("SupplyList/Show", null, function(object){
//            hide("supply_form");
//            show("supply_list")
//        });
//        
//        dojo.subscribe("ProductForm/Show", null, function(object){
//            hide("product_list");
//            show("product_form")
//        });
//        
//        dojo.subscribe("ProductList/Show", null, function(object){
//            hide("product_form");
//            show("product_list")
//        });
        
    });
</script>